.page50-page {
  padding: 24px;
  min-height: 100vh;
  background: #f6f6f8;

  .page-title {
    margin-bottom: 16px;
  }

  // 动画容器
  .animation-container {
    text-align: center;
    padding: 40px 0;

    .animation-section {
      margin-bottom: 30px;
      padding: 20px;
      border: 2px dashed #d9d9d9;
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.02);
    }

    .animation-row {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 30px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }

    // 旋转方块 - 快速旋转
    .rotating-box {
      width: 60px;
      height: 60px;
      background: linear-gradient(45deg, #1890ff, #52c41a);
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      animation: rotate 0.8s linear infinite;
      transform-origin: center;
    }

    // 弹跳球
    .bouncing-ball {
      width: 50px;
      height: 50px;
      background: radial-gradient(circle, #ff6b35, #f7931e);
      border-radius: 50%;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      animation: bounce 0.6s ease-in-out infinite alternate;
    }

    // 滑动条
    .sliding-bar {
      width: 80px;
      height: 20px;
      background: linear-gradient(90deg, #722ed1, #eb2f96);
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      animation: slide 1s ease-in-out infinite alternate;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 10px;
        height: 10px;
        background: white;
        border-radius: 50%;
        transform: translateY(-50%);
        animation: slideIndicator 1s ease-in-out infinite alternate;
      }
    }

    // 脉冲圆圈
    .pulsing-circle {
      width: 50px;
      height: 50px;
      background: radial-gradient(circle, #13c2c2, #36cfc9);
      border-radius: 50%;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      animation: pulse 0.8s ease-in-out infinite alternate;
    }

    // requestAnimationFrame 动画元素
    .raf-animation {
      width: 80px;
      height: 80px;
      background: linear-gradient(45deg, #ff6b35, #f7931e);
      border-radius: 12px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
      margin: 0 auto;
      position: relative;
      transform-origin: center;

      // 添加一个内部指示器来更清楚地看到动画
      &::before {
        content: "RAF";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-weight: bold;
        font-size: 12px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      }
    }
  }

  // 动画定义
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes bounce {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-30px);
    }
  }

  @keyframes slide {
    from {
      transform: translateX(-20px);
    }
    to {
      transform: translateX(20px);
    }
  }

  @keyframes slideIndicator {
    from {
      left: 5px;
    }
    to {
      left: calc(100% - 15px);
    }
  }

  @keyframes pulse {
    from {
      transform: scale(1);
      opacity: 1;
    }
    to {
      transform: scale(1.3);
      opacity: 0.7;
    }
  }

  // 悬停时动画变得更快
  .animation-container:hover {
    .rotating-box {
      animation: rotate 0.3s linear infinite;
    }

    .bouncing-ball {
      animation: bounce 0.3s ease-in-out infinite alternate;
    }

    .sliding-bar {
      animation: slide 0.5s ease-in-out infinite alternate;

      &::after {
        animation: slideIndicator 0.5s ease-in-out infinite alternate;
      }
    }

    .pulsing-circle {
      animation: pulse 0.4s ease-in-out infinite alternate;
    }
  }
}
